<template>
  <el-dialog
            title="修改/补充商户信息"
      :visible.sync="formInfoObj.visible"
      width="30%">
      <el-form :model="formInfoObj"
          :rules="rulesRef"
          ref="ruleFormsRef">
        <el-form-item label="商店图片">
           <VabQiniuUpload :limit="1" ref="cerateUpload" @onOk="urlOK"></VabQiniuUpload>
        </el-form-item>
        <el-form-item label="商店名" prop="name">
          <el-input v-model="formInfoObj.name"></el-input>
        </el-form-item>
        <el-form-item label="商店地址">
          <el-input
          type="textarea"
          :autosize="{ minRows: 6, maxRows: 10}"
          placeholder="请输入商店地址"
          show-word-limit
          maxlength="50"
          v-model="formInfoObj.location">
        </el-input>
        </el-form-item>
        <el-form-item label="开始营业时间" prop="startTime">
          <el-time-select
            style="width:100%"
              placeholder="开始营业时间"
              v-model="formInfoObj.startTime"
              >
            </el-time-select>
        </el-form-item>
          <el-form-item label="结束营业时间" prop="endTime">
          <el-time-select
              placeholder="结束营业时间"
               style="width:100%"
              v-model="formInfoObj.endTime"
              >
            </el-time-select>
        </el-form-item>
          <el-form-item label="是否营业" prop="isOpen">
            <el-select v-model="formInfoObj.isOpen" style="width:100%" placeholder="请选择">
              <el-option
                v-for="item in yesOrNoData"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="商店自述">
          <el-input
          type="textarea"
          :autosize="{ minRows: 6, maxRows: 10}"
          placeholder="请输入商店自述"
          show-word-limit
          maxlength="50"
          v-model="formInfoObj.selfExpression">
        </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formInfoObj.visible = false">取 消</el-button>
        <el-button type="primary" @click="submitform(ruleFormsRef)">确 定</el-button>
      </span>
    </el-dialog>
</template>

<script>
import {
  Vue,
  ref,
  toRefs,
  shallowRef,
  reactive,
  watch,
  watchEffect,
  getCurrentInstance,
  computed,
  defineComponent,
  nextTick,
  inject,
  onMounted,
  onUnmounted
} from 'vue'
import { Message,MessageBox } from 'element-ui'
import store from '@/store'
import VabQiniuUpload from '@/components/VabQiniuUpload'
import {setMerchantShopEdit} from '@/api/merchant/shop_api.js'
export default {
  name: 'shopEdit',
    components: {
      VabQiniuUpload
    },
  setup(props, { emit }) {
   // const emits = defineEmits(['onOk']) imgName
    const Interface = reactive({
      openForm(row){
        query.file = ''
        query.formInfoObj.id = row.id
        query.formInfoObj.imgUrl = row.imgUrl
        query.formInfoObj.selfExpression = row.selfExpression
        query.formInfoObj.location = row.location
        query.formInfoObj.startTime = row.startTime
        query.formInfoObj.endTime = row.endTime
        query.formInfoObj.isOpen = row.isOpen
        query.formInfoObj.name = row.name
        query.formInfoObj.visible = true
        nextTick(()=>{
            cerateUpload.value.loadImg(row)
          })
      },
     urlOK(file){
      query.file = file
     },
     async submitform(formEl){
        if (!formEl) return;
        await formEl.validate(async(valid, fields) => {
          if (valid) {
            if(query.file){
              const fileUrl = await store.dispatch('baseStore/setQiniuUpdate',query.file)
              query.formInfoObj.imgUrl = fileUrl
            }
            const {code} = await setMerchantShopEdit(query.formInfoObj)
            if(code === 0){
              Message.success('操作成功')
              query.formInfoObj.visible = false
              emit('onOk')
            }
          }
        })
      }
    })
    const ruleFormsRef = ref(null)
    const cerateUpload = ref(null)
    const query = reactive({
      file:'',
      yesOrNoData: computed(() => store.getters['baseStore/yesOrNoData']),
      rulesRef:{
        name:[{ required: true, message: "请输入商店名", trigger: "blur" }],
        imgUrl:[{ required: true, message: "请上传封面图", trigger: "blur" }],
        location:[{ required: true, message: "请输入商店地址", trigger: "blur" }],
        startTime:[{ required: true, message: "请选择开始营业时间", trigger: "blur" }],
        endTime:[{ required: true, message: "请选择结束营业时间", trigger: "blur" }],
        isOpen:[{ required: true, message: "请选择是否营业", trigger: "blur" }]
      },
      formInfoObj:{
        name:'',
        imgUrl:'',
        visible:false,
        selfExpression:'',
        startTime:'',
        endTime:'',
        location:'',
        id:'',
        isOpen:1,
      }
    })
    return {
      ruleFormsRef,
      cerateUpload,
      ...toRefs(query),
      ...toRefs(Interface)
    }
  }
}
</script>